<template>
    <!-- 页面的主要内容容器 -->
    <div class="statisticstements-container">
        <!-- 页面标题 -->
        <p class="page-title">统计与报表</p>
        <el-divider></el-divider>
        <!-- 内容容器，包含概述和学员情况 -->
        <div class="content-container">
            <el-text tag="b" size="large" class="sub-title"> 概述</el-text>
            <!-- 概述信息的展示区域，使用Element Plus的描述列表组件 -->
            <div class="descriptions-container">
                <el-descriptions border :column="2">
                    <el-descriptions-item label="单位名称">{{
                        userStore.info_data.name
                    }}</el-descriptions-item>
                    <el-descriptions-item label="组委会总数" v-if="is_show_organizing">{{
                        statistics_data.agentNum ?? 0
                    }}</el-descriptions-item>
                    <el-descriptions-item label="机构总数">
                        <el-text title="已通过审核机构总数">{{
                            statistics_data.institutionNum ?? 0
                        }}</el-text>
                    </el-descriptions-item>

                    <el-descriptions-item label="目标完成情况" v-if="is_show_organizing">
                        <el-text title="已绑定学员总数/目标总数">
                            {{ statistics_data.paidNum ?? 0 }}/{{
                                statistics_data.totalNumber ?? 0
                            }}
                        </el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="目标完成情况" v-else>
                        <el-text title="已绑定学员总数/目标总数">
                            {{ statistics_data.paidNum ?? 0 }}/{{
                                userStore.info_data.targetNumber ?? 0
                            }}
                        </el-text>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- 学员情况部分的标题和筛选组件 -->
            <div class="header-container">
                <span>
                    <el-text tag="b" size="large" class="sub-title"> 学员情况</el-text>
                    <el-text size="large"> ({{ findTitle }})</el-text>
                </span>
                <!-- 筛选事件下拉选择组件和搜索按钮 -->
                <el-space>
                    <EventSelect v-model="query_data.rootId" @title-change="(value) => {
                        findTitle = value;
                    }
                        " />
                    <el-button size="large" :icon="Search" circle :loading="loading" @click="handleSearch" />
                </el-space>
            </div>
            <!-- Echarts图表容器 -->
            <div class="echarts-container">
                <div id="echarts-container"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import EventSelect from "@/components/event-select/index.vue";
import { useUserStore } from "@/store/user";
import { Search } from "@element-plus/icons-vue";
import * as echarts from "echarts"; // 引入Echarts图表库
import { GetStatisticsApi } from "@/api/manage"; // 引入获取统计数据的API接口
import { ElMessage } from "element-plus"; // 引入Element Plus的消息提示组件
// 使用Vue的useUserStore来获取用户信息
const userStore = useUserStore();
// 计算属性，判断是否显示组委会总数
const is_show_organizing = computed(() => {
    return userStore.info_data.role == "organizing";
});
// 查询标题的响应式引用
const findTitle = ref("全部赛项");
// 查询数据的响应式引用
const loading = ref(false);
const query_data = ref({
    agentId: "",
    institutionId: "",
    rootId: "",
});
// 统计数据的响应式引用
const statistics_data = ref({
    auditedNum: 0,
    paidNum: 0,
    pendingNum: 0,
});
// Echarts实例
let myChart = null;
// 获取报表数据的异步函数
const handleSearch = async () => {
    loading.value = true;
    let res = await GetStatisticsApi(query_data.value);
    if (res.success) {
        statistics_data.value = res.entity; // 获取数据成功后，设置Echarts图表选项
        handleEchartsSetOption();
    }
    loading.value = false;
};

// 获取option，也是图表能否加载出来的核心
const getOption = () => {
    // 定义图表颜色数组
    const color = ["#909399", "#E6A23C", "#67C23A"];
    const option = {
        tooltip: {
            trigger: "item", // 提示框触发类型为数据项
        },
        legend: {
            top: "5%", // 图例位置
            left: "center", // 图例位置
        },
        color, // 使用定义的颜色数组
        // series是option的核心，决定了图表的内容和样子
        series: [
            {
                type: "pie", // 系列类型为饼图
                radius: [0, "50%"], // 饼图半径范围
                itemStyle: {
                    borderRadius: 10, // 图形样式配置，圆角大小
                    borderColor: "#fff", // 图形边框颜色
                    borderWidth: 2, // 图形边框宽度
                },
                label: {
                    formatter: " {b|{b}：}{c}  {per|{d}%}  ", // 标签内容格式
                    // {a}：系列名。 {b}：数据名。 {c}：数据值。{d}：百分比。
                    backgroundColor: "#F6F8FC", // 标签背景颜色
                    borderColor: "#8C8D8E", // 标签边框颜色
                    borderWidth: 1, // 标签边框宽度
                    borderRadius: 4, // 标签圆角大小
                    // 富文本标签样式配置
                    rich: {
                      
                        b: {
                            color: "#4C5058",
                            fontSize: 14,
                            fontWeight: "bold",
                            lineHeight: 33,
                        },
                        per: {
                            color: "#fff",
                            backgroundColor: "#4C5058",
                            padding: [3, 4],
                            borderRadius: 4,
                        },
                    },
                },
                emphasis: {
                    label: {
                        show: true, // 是否显示标签
                        fontSize: 40, // 标签字体大小
                        fontWeight: "bold", // 标签字体粗细
                    },
                },
                labelLine: {
                    length: 30, // 标签引导线长度
                },
                // 数据项
                data: [
                    { value: statistics_data.value.pendingNum, name: "已报名" },
                    { value: statistics_data.value.auditedNum, name: "待绑定" },
                    { value: statistics_data.value.paidNum, name: "已绑定" },
                ],
            },
        ],
    }
    return option
}

const handleEchartsSetOption = () => {
    const option = getOption()
    myChart.setOption(option)
}
const initEcharts = () => {
    myChart = echarts.init(document.getElementById("echarts-container"));
    handleEchartsSetOption()
}

/**
 * 组件挂载后执行的操作
 * 初始化Echarts图表实例，获取报表数据，获取用户信息并设置图表选项
 */
onMounted(() => {
    initEcharts()
    handleSearch();
    // userStore.handleGetInformation();
});
</script>

<style lang="scss" scoped>
.statisticstements-container {
    padding: 20px;

    .content-container {
        .descriptions-container {
            padding-bottom: 32px;
            padding-top: 16px;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .echarts-container {
        padding: 32px;
        box-sizing: border-box;
        width: 100%;

        #echarts-container {
            width: 100%;
            height: 600px;
        }
    }
}

.sub-title {
    font-size: 24px;
}
</style>